<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./css/iconfont.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      height: 100%;
    }

    body {
      display: flex;
      flex-direction: column;
      /* align-items: stretch; */
    }


    .container {
      flex: 1;
      display: flex;
    }

    .left {
      width: 85px;
      overflow: hidden;
    }

    #wrap li {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f8f8f8;
      font-size: 14px;
      height: 45px;
    }

    #wrap .active {
      background-color: #fff;
      color: red;
    }

    img {
      display: block;
      width: 100%;
    }

    a {
      text-decoration: none;
      display: block;
      color: inherit;
    }

    .right {
      flex: 1;
      overflow: hidden;
      padding: 5px;
    }

    .goods {
      display: flex;
      flex-wrap: wrap;
    }

    .goods>a {
      width: 33.33%;
    }

    header {
      width: 100%;
      height: 45px;
      display: flex;
      border-bottom: 1px solid #ccc;
    }

    header .back,
    header .menu {
      width: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: rgb(36, 33, 33);
      font-size: 22px;
    }

    header .search {
      flex: 1;
      padding: 8px 0;
      position: relative;
    }

    .icon-search {
      position: absolute;
      font-size: 18px;
      top: 13px;
      left: 5px;
      color: #666;
    }

    .search input {
      width: 100%;
      height: 100%;
      border-radius: 15px;
      border: none;
      outline: none;
      background-color: #f7f7f7;
      text-indent: 25px;
    }
  </style>
</head>

<body>
  <header>
    <a href="javascript:;" class="back">
      <span class="iconfont icon-left"></span>
    </a>
    <div class="search ">
      <span class="iconfont icon-search"></span>
      <input type="text" placeholder="618电脑数码 畅游无界 玩所未玩">
    </div>
    <a href="javascript:;" class="menu">
      <span class="iconfont icon-ellipsis"></span>
    </a>
  </header>
  <div class="container">
    <div class="left">
      <ul id="wrap">
        <li> 热门推荐 </li>
        <li> 手机数码 </li>
        <li> 家用电器 </li>
        <li> 电脑办公 </li>
        <li> 计生情趣 </li>
        <li> 美妆护肤 </li>
        <li> 个护清洁 </li>
        <li> 汽车用品 </li>
        <li> 京东超市 </li>
        <li> 男装 </li>
        <li> 男鞋 </li>
        <li> 女装 </li>
        <li> 女鞋 </li>
        <li> 母婴童装 </li>
        <li> 运动户外 </li>
        <li> 内衣配饰 </li>
        <li> 食品生鲜 </li>
        <li> 家具家装 </li>
        <li> 箱包手袋 </li>
        <li> 钟表珠宝 </li>
        <li> 图书音像 </li>
        <li> 医药保健 </li>
        <li> 宠物生活 </li>
        <li> 礼品鲜花 </li>
        <li> 农资绿植 </li>
        <li> 生活旅行 </li>
        <li> 奢侈品 </li>
        <li> 全球购 </li>
        <li> 艺术邮币 </li>
        <li> 二手商品 </li>
        <li> 特产馆 </li>
        <li> 京东金融 </li>
        <li> 拍卖 </li>
        <li> 房产 </li>
      </ul>
    </div>
    <div class="right">
      <div>
        <a href="javascript:;">
          <img src="./images/sort_banner.jpg" alt="">
        </a>
        <div class="goods">
          <a href="javascript:;">
            <img src="./images/sort_1.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_2.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_3.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_4.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_5.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_6.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_7.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_8.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_9.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_10.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_11.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_12.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_13.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_14.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_15.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_1.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_2.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_3.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_4.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_5.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_6.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_7.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_8.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_9.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_10.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_11.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_12.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_13.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_14.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_15.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_1.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_2.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_3.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_4.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_5.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_6.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_7.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_8.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_9.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_10.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_11.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_12.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_13.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_14.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_15.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_1.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_2.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_3.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_4.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_5.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_6.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_7.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_8.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_9.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_10.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_11.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_12.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_13.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_14.jpg" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/sort_15.jpg" alt="">
          </a>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="./iscroll.js"></script>
<script src="./itcast.js"></script>
<script>
  leftScroll();
  rightScroll();

  function leftScroll() {
    var is1 = new IScroll(".left");
    var ul = document.querySelector("#wrap");
    var lis = ul.querySelectorAll("li")
    console.log(lis.length);
    itcast(ul).tap(function (e) {
      var li = e.target;
      for (var i = 0; i < lis.length; i++) {
        var element = lis[i];
        element.classList.remove("active")
      }
      li.classList.add("active");
      is1.scrollToElement(li);
    })
  }

  function rightScroll() {
    var is2 = new IScroll(".right", {
      tap: true
    });
    var right = document.querySelector(".right");
    right.addEventListener("tap", function () {
      console.log("我被点击了");
    })
  }
</script>

</html>